<template>
    <div ref="feelChartPage">
        <div ref="feelChart" style="width:200px;height:110px;margin-top:-20px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { trainScreenOption } from '../../../../utils/js/point'
export default {
    props: {
        trainChartData:{
            default: ()=>{}
        },
        dataColor: {
            default: 'rgba(14,76,255,1)'
        }
    },
    data() {
        return {
            allData: [],
            trainFeelData: [],
            xAxisData: null,
        }
    },
    mounted() {
        this.updatechart();
    },
     methods: {
        updatechart() {
            trainScreenOption.title[0].text = '训练精度';
            let len = this.trainChartData.dataLength;
            trainScreenOption.title[1].text = this.trainChartData.trainPrecision[len-1] + '%';
            trainScreenOption.title[1].textStyle.color = this.dataColor;
            trainScreenOption.series[0].itemStyle.color = this.dataColor;
            let colorTemp = this.dataColor.split(',').slice(0,3).join(',');
            trainScreenOption.series[0].areaStyle.color.colorStops[0].color = colorTemp + ',0.4)';
            trainScreenOption.series[0].areaStyle.color.colorStops[1].color = colorTemp + ',0)';
            var myChart = echarts.init(this.$refs.feelChart);
            myChart.setOption(trainScreenOption);
            //  echart图表自适应
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
     }
}
</script>